<template>
    <div class="reply-warp side-card" id="reply-wrap">
        <div class="reply-title">
            <svg-icon icon-class="comment" size="0.6rem" style="margin-right: 0.2rem;"/>
            评论栏
        </div>
        <ReplyBox @reload="reloadComments" :comment-type="commentType" :type-id="typeId"></ReplyBox>
        <div v-if="count > 0 && reFresh">
            <div class="reply-item side-card" v-for="(comment, index) of commentList" :key="comment.id">
                <div style="position: relative;top: 0.4rem">
                    <img v-if="comment.userIntro.avatar" class="author-avatar" :src="comment.userIntro.avatar"
                         alt="author"/>
                    <img v-else class="author-avatar" src="@/assets/images/user/default-author.png" alt="author"/>
                </div>
                <div class="content-warp">
                    <div class="user-info">
                        <div class="user-name">{{ comment.userIntro.nickname }}</div>
                        <svg-icon icon-class="badge" size="0.4rem"/>
                    </div>
                    <div class="reply-content" v-html="comment.content"></div>
                    <div class="reply-info">
                        <span>{{ formatDateTime(comment.createTime) }}</span>
                        <span class="reply-like" @click="like(comment)">
                          <svg-icon class="like" icon-class="like-s" size="0.35rem"
                                    :class="isLike(comment.id)"/>
                          <span v-show="comment.likeNumber">{{ comment.likeNumber }}</span>
                        </span>
                        <span class="reply-btn" @click="handleReply(index, comment)">回复</span>
                    </div>
                    <div class="sub-reply-item side-card" v-for="reply of comment.replyVOList" :key="reply.id">
                        <div class="user-info">
                            <img class="author-avatar" :src="reply.userIntro.avatar" alt="not"/>
                            <div class="user-name">{{ reply.userIntro.nickname }}</div>
                            <svg-icon v-if="reply.userIntro.id == 1" icon-class="badge" size="0.4rem"
                                      style="margin-left: 0.2rem;"/>
                        </div>
                        <span class="reply-content">
                           <template v-if="reply.userIntro.id !== reply.toUid">
                               回复<span class="reply-name">@{{ reply.toNickname }}</span>:
                           </template>
                          <span v-html="reply.content"></span>
                        </span>
                        <div class="reply-info">
                            <span class="reply-time">{{ formatDateTime(reply.createTime) }}</span>
                            <span class="reply-like" @click="like(reply)">
                                <svg-icon class="like" icon-class="like-s" size="0.35rem"
                                          :class="isLike(reply.id)"/>
                                <span v-show="reply.likeNumber > 0">{{ reply.likeNumber }}</span>
                            </span>
                            <span class="reply-btn" @click="handleReply(index, reply)">回复</span>
                        </div>
                    </div>
                    <div ref="readMoreRef" class="view-more" v-show="comment.replyNumber > 3">
                        <span>共{{ comment.replyNumber }}条回复, </span>
                        <span class="view-more-btn" @click="readMoreComment(index, comment)">点击查看</span>
                    </div>
                    <Paging ref="pageRef" :total="comment.replyNumber" :index="index" :commentId="comment.id"
                            @get-pageNum-page="getCurrentPage"/>
                    <ReplyBox ref="replyRef" class="mt-4" :show="false" :comment-type="commentType" :type-id="typeId"
                              @reload="reloadReplies(index)"/>
                </div>
            </div>
            <div class="loading-warp" v-if="count > commentList.length">
                <n-button class="btn" color="#e9546b" @click="getList">加载更多...</n-button>
            </div>
        </div>
        <div v-else style="padding: 1.25rem; text-align: center;font-size: 0.3rem">来发评论吧~</div>
    </div>
</template>

<script setup lang="ts">
import {getCommentList, getReplyList, likeComment} from '@/api/comment';
import {Comment, CommentQuery, Reply} from '@/api/comment/types';
import useStore from "@/store";
import {formatDateTime} from '@/utils/date';

const {user, app} = useStore();
const replyRef = ref<any>([]);
const pageRef = ref<any>([]);
const readMoreRef = ref<any>([]);
const props = defineProps({
    commentType: {
        type: Number,
    }
});
const emit = defineEmits(["getCommentCount"]);
const typeId = computed(() => Number(useRoute().params.id) ? Number(useRoute().params.id) : undefined);
const isLike = computed(() => (id: number) => user.commentLikeSet.indexOf(id) != -1 ? "like-flag" : "");

const commentList = ref([] as Comment[]);
const data = reactive({
    count: 0,
    reFresh: true,
    queryParams: {
        pageNum: 1,
        pageSize: 5,
        entityId: typeId.value,
        type: props.commentType,
    } as CommentQuery,
});
const {count, reFresh, queryParams} = toRefs(data);
const like = (comment: Comment | Reply) => {
    if (!user.id) {
        app.setLoginFlag(true);
        return;
    }
    let id = comment.id;
    likeComment(id).then(({data}) => {
        if (data.flag) {
            //判断是否点赞
            if (user.commentLikeSet.indexOf(id) != -1) {
                comment.likeNumber -= 1;
            } else {
                comment.likeNumber += 1;
            }
            user.commentLike(id);
        }
    });
};
// 刷新评论列表
watch(
    commentList,
    () => {
        reFresh.value = false;
        nextTick(() => {
            reFresh.value = true
        })
    },
    {deep: false},
);
// 查看更多评论
const readMoreComment = (index: number, comment: Comment) => {
    getReplyList(comment.id, {pageNum: 1, pageSize: 5}).then(({data}) => {
        comment.replyVOList = data.data;
        // 回复大于5条展示分页
        if (comment.replyNumber > 5) {
            pageRef.value[index].setPaging(true);
        }
        // 隐藏查看更多
        readMoreRef.value[index].style.display = "none";
    });
};
// 查看当前页的回复评论
const getCurrentPage = (pageNum: number, index: number, commentId: number) => {
    getReplyList(commentId, {pageNum: pageNum, pageSize: 5}).then(({data}) => {
        commentList.value[index].replyVOList = data.data;
    });
};
const handleReply = (index: number, target: Comment | Reply) => {
    replyRef.value.forEach((element: any) => {
        element.setReply(false);
    });
    const currentReply = replyRef.value[index];
    currentReply.nickname = target.userIntro.nickname;
    currentReply.commentForm.replyId = target.id;
    currentReply.commentForm.toUid = target.userIntro.id;
    currentReply.commentForm.parentId = commentList.value[index].id;
    currentReply.setReply(true);
};
const getList = () => {
    getCommentList(queryParams.value).then(({data}) => {
        console.log(data.rows)
        if (queryParams.value.pageNum == 1) {
            commentList.value = data.rows;
        } else {
            commentList.value.push(...data.rows);
        }
        queryParams.value.pageNum++;
        count.value = data.total;
        emit("getCommentCount", count.value);
    });
};
// 重新加载评论列表
const reloadComments = () => {
    queryParams.value.pageNum = 1;
    getList();
};
// 重新加载回复评论
const reloadReplies = (index: number) => {
    getReplyList(commentList.value[index].id, {
        pageNum: pageRef.value[index].pageNum,
        pageSize: 5,
    }).then(({data}) => {
        commentList.value[index].replyVOList = data.data;
        commentList.value[index].replyNumber++;
        // 隐藏回复框
        replyRef.value[index].setReply(false);
        // 回复大于5条展示分页
        if (commentList.value[index].replyNumber > 5) {
            pageRef.value[index].setPaging(true);
        }
        // 隐藏查看更多
        readMoreRef.value[index].style.display = "none";
    });
};
onMounted(() => {
    getList();
});
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

.reply-warp {
  width: 100%;
  margin-top: 0.8rem;

  .reply-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.6rem;
    color: var(--main-1);
  }

  .reply-item {
    display: flex;
    background: var(--main-2-hs2);

    &:hover {
      box-shadow: 0 0 0.1rem 0.05rem var(--box-shadow);
    }

    .content-warp {
      flex: auto;
      margin-left: 0.25rem;

      .user-info {
        display: flex;
        align-items: center;
        gap: 0.2rem;

        .user-name {
          font-size: 0.4rem;
          color: var(--main-1);
        }
      }

      .reply-content {
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-word;
        white-space: pre-wrap;
        font-size: 0.25rem;
        line-height: 0.3rem;
        vertical-align: baseline;
        color: var(--text-color);
      }

      .reply-info {
        display: flex;
        align-items: center;
        margin-top: 0.125rem;
        color: var(--main-1-hs1);

        .reply-like {
          display: flex;
          align-items: center;
          gap: 0.1rem;
          margin: 0 0.2rem;
          cursor: pointer;

          &:hover .like {
            color: var(--red-color);
          }
        }

        .reply-btn {
          cursor: pointer;

          &:hover {
            color: var(--pink-color);
          }
        }
      }

      .sub-reply-item {
        position: relative;
        margin: 0.2rem 0 0.2rem -0.7rem;
        padding: 0.1rem 0.2rem;

        &:hover {
          box-shadow: 0 0 0.1rem 0.05rem var(--box-shadow);
        }

        .author-avatar {
          width: 0.6rem;
          height: 0.6rem;
          position: relative;
          top: 0.2rem;
        }

        .reply-content {
          margin-left: 0.7rem;

          .reply-name {
            color: var(--main-1);
          }
        }

        .reply-info {
          margin-left: 0.7rem;
        }
      }

      .view-more {
        color: var(--main-1-hs1);

        .view-more-btn {
          cursor: pointer;

          &:hover {
            color: var(--pink-color);
          }
        }
      }
    }
  }
}
</style>